<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/login.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.form.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/login.js}" charset="UTF-8"></script>
	<title>登录 / 注册</title>
</head>
<body>
	<div class="public-head-layout container">
		<a class="logo" th:href="@{/}"><img src="http://rzxqapkcp.hd-bkt.clouddn.com/index/whlogo.png" alt="旺和" class="cover"></a>
	</div>
	<div style="background:url('http://rzxqapkcp.hd-bkt.clouddn.com/index/login_bg.png') no-repeat center center; width:100%;background-size:100% ">
		<div class="login-layout container">
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录</h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form" th:action="@{/user/login}" method="post" id="login_form" οnsubmit="return false;">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="username" id="login_phone" required placeholder="账号"  autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
	                        </label>
	                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error">
<!--								<div class="alert alert-warning alert-dismissible fade in" role="alert">-->
<!--									<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--									<strong>账号或密码错误</strong> 请重新输入-->
<!--								</div>-->
							</div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">登录</button><br>
	                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">登录成功</p>
								<p class="success-text">即将跳转...</p>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box register">
  				<div class="tabs-nav">
  					<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form" th:action="@{/user/register}" method="post" id="register_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="username" id="register_phone" required placeholder="用户名"  autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" id="register_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password"  id="confirm_pwd" placeholder="确认密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked=""  id="register_checkbox" type="checkbox"><i></i> 同意<a target="_blank" href="https://terms.alicdn.com/legal-agreement/terms/TD/TD201609301342_19559.html">用户协议</a>
	                        </label>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit" type="button">注册</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">注册成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" th:href="@{/user/getLoginPage}" class="btn btn-block btn-lg btn-default">去登陆</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box resetpwd">
  				<div class="tabs-nav clearfix">
  					<h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form"  method="post" id="resetpwd_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" name="username" id="resetpwd_username" required placeholder="用户名"  autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input class="form-control" name="question" id="resetpwd_question" placeholder="获取密保"  type="text">
								<span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button" id="query_question">查询密保问题</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="answer" id="resetpwd_answer" placeholder="密保答案" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" id="resetpwd_pwd" placeholder="新的密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="resetpwd_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit" type="button">重置密码</button>
                    </form>
                    <div class="tabs_div">
						<div class="success-box">
							<div class="success-msg">
								<i class="success-icon"></i>
								<p class="success-text">重置成功</p>
							</div>
						</div>
						<div class="option-box">
							<div class="buts-title">
								现在您可以
							</div>
							<div class="buts-box">
								<a role="button" th:href="@{/user/getLoginPage}" class="btn btn-block btn-lg btn-default">去登陆</a>
							</div>
						</div>
                    </div>
                </div>
			</div>
			<script th:inline="javascript">
				$(document).ready(function() {

					switch($.getUrlParam('p')) {
						case 'register': $('.register').show(); break;
						case 'resetpwd': $('.resetpwd').show(); break;
						default: $('.login').show();
					};
					// 发送验证码事件
					// $('.getsms').click(function() {
					// 	var phone = $(this).parents('form').find('input.phone');
					// 	var error = $(this).parents('form').find('.error_msg');
					// 	switch(phone.validatemobile()) {
					// 		case 0:
					// 			// 短信验证码的php请求
					// 			error.html(msgtemp('验证码 <strong>已发送</strong>','alert-success'));
					// 			$(this).rewire(60);
					// 		break;
					// 		case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); break;
					// 		case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); break;
					// 		case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); break;
					// 	}
					// });
					// 登录按钮
					$('#login_submit').click(function() {
						var form = $(this).parents('form')
						var error = form.find('.error_msg');
						var success = form.siblings('.tabs_div');
						$.post(
								[[${#request.getContextPath()}]]+"/user/login",
								form.serialize(),
								function(data) {
									if(data.code==0){
										form.fadeOut(200,function() {
											success.fadeIn(200,function (){
												setTimeout(function() {
													var topath=[[${session.url}]];
													if(topath==null){
														topath=[[${#request.getContextPath()}]]+'/';
													}
													//console.log(topath);
													window.location.href =topath;
												}, 1000);
											});
										});
									}else {
										error.html(msgtemp('<strong>账号或密码错误</strong> 请重新输入','alert-warning'));
									}
								},
								'json'
						);
					})
					//注册按钮
					$('#register_submit').click(function() {
						var form = $(this).parents('form')
						var registerPwd = form.find('input#register_pwd');
						var conformPwd=form.find('input#confirm_pwd')
						var error = form.find('.error_msg');
						var register_checkbox=form.find('#register_checkbox');
						var success = form.siblings('.tabs_div');
						if(registerPwd.val()!=conformPwd.val()){
							error.html(msgtemp('<strong>两次密码输入不一致</strong> 请重新输入','alert-warning'));
							return;
						}
						if(!register_checkbox.is(':checked')){
							error.html(msgtemp('<strong>请先勾选用户协议</strong>','alert-warning'));
							return;
						}
						$.post(
								[[${#request.getContextPath()}]]+"/user/register",
								form.serialize(),
								function(data) {
									if(data.code==0){
										form.fadeOut(200,function() {
											success.fadeIn(200);
										});
									}else {
										error.html(msgtemp('<strong>注册失败</strong> 可能此用户名已注册','alert-warning'));
									}
								},
								'json'
						);
					})

					//查询问题
					$('#query_question').click(function (){
						var username=$('#resetpwd_username').val();
						//console.log(username);
						var input_question=$('#resetpwd_question');
						var error=$('#resetpwd_error');
						$.post(
								[[${#request.getContextPath()}]]+"/user/queryQuestion",
								{'username':username},
								function(data) {
									if(data.code==0){
										input_question.val(data.msg);
									}else {
										error.html(msgtemp('<strong>'+data.msg+'</strong>','alert-warning'));
									}
								},
								'json'
						);
					})
					//重置密码
					$('#resetpwd_submit').click(function (){
						var form = $(this).parents('form');
						var success = form.siblings('.tabs_div');
						var username=$('#resetpwd_username').val();
						var question=$('#resetpwd_question').val();
						var answer=$('#resetpwd_answer').val();
						var newPassword=$('#resetpwd_pwd').val();
						var error=$('#resetpwd_error');
						if(username==null||question==null||answer==null||newPassword==null||username==''||question==''||answer==''||newPassword==''){
							error.html(msgtemp('<strong>信息不完整</strong>','alert-warning'));
						}else {
							$.post(
								[[${#request.getContextPath()}]]+"/user/resetPwdByQuestion",
								{'username':username,'answer':answer,'newPassword':newPassword},
								function(data) {
									if(data.code==0){
										form.fadeOut(200,function() {
											success.fadeIn(200);
										});
									}else {
										error.html(msgtemp('<strong>'+data.msg+'</strong>','alert-warning'));
									}
								},
								'json'
							);
						}

					})
				});
			</script>
		</div>
	</div>
	<div class="footer-login container clearfix">
		<!-- 版权 -->
		<p class="copyright">
			© 2012-2099 旺和 版权所有，并保留所有权利<br>
		</p>
	</div>
</body>
</html>